// 创建store
import { create } from "zustand";
import { useEffect } from "react";

const url = "http://geek.itheima.net/v1_0/channels";
const useBearStore = (set) => {
  return {
    count: 1,
    channels: [],
    increase: () => {
      // 参数是函数需要用到老数据
      //   set((state) => ({ count: state.count + 1 }));
      // 参数是{}不需要用到老数据
      set({ count: 100 });
    },
  };
};

// store的模块化 // 异步使用
const channelStore = (set) => {
  return {
    channels: [],
    fetchChannels: async () => {
      const res = await fetch(url);
      const data = await res.json();
      set({ channels: data.data.channels });
    },
  };
};
const rootStore = create((...a) => {
  return {
    ...useBearStore(...a),
    ...channelStore(...a),
  };
});
function App() {
  //   如果组件只依赖状态的一部分，可以只订阅部分状态，减少不必要的渲染：
  // const count = rootStore((state) => state.count); // 只订阅 count
  // const increment = rootStore((state) => state.increment);
  // 这样只有 count 改变时，组件才会重新渲染。
  const { count, increase, fetchChannels, channels } = rootStore();
  useEffect(() => {
    fetchChannels();
  }, [fetchChannels]);

  return (
    <div className="list">
      {channels.slice(0, 5).map((item) => (
        <p key={item.id}>zustand的使用异步——{item.name}</p>
      ))}

      <span>zustand的使用同步——{count}</span>
      <button onClick={() => increase()}>+1</button>
    </div>
  );
}
export default App;
